<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>区域设置</title>

    <!-- 导入jquery核心类库 -->
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>

    <!-- 导入ocupload -->
    <script type="text/javascript" src="../../js/ocupload/jquery.ocupload-1.1.2.js"></script>

    <!-- 导入easyui类库 -->
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
    <link rel="stylesheet" type="text/css" href="../../css/default.css">
    <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
    <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
    <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="../../js/citypicker/city-picker.css" rel="stylesheet" type="text/css"/>
    <script src="../../js/citypicker/city-picker.data.js"></script>
    <script src="../../js/citypicker/city-picker.js"></script>
    <script type="text/javascript">
        $(function () {
            // 先将body隐藏，再显示，不会出现页面刷新效果
            $("body").css({visibility: "visible"});
            $("#grid").datagrid({
                fit: true,
                Striped: true,
                border: true,
                rownumbers:true,
                pageList:[2,20,30],
                pagination:true,
                columns: columns,
                toolbar: toolbar,
                idFiled: 'id',
                url: '../../area_findpage.action',
                autoRowHeight:true
            });

            $("#save").click(function () {
                if($("#areaForm").form('validate')){
                    $("#areaForm").submit();
                }else{
                    alert("请填写所有项目");
                }

            });

            $("#searchBtn").click(function () {
                var entity= $("#searchForm").serializeJson();
                $("#grid").datagrid('load',entity);
                $("#searchWindow").window('close');
            });
            $("#reset").click(function(){
                $('#city-picker').citypicker('reset');
                $('#city-picker').citypicker('destroy');
            });
            
            $("#button-import").upload({
                action:"../../area_import.action",
                enctype: 'multipart/form-data',
                name:'file',
                    onSelect:function () {
                    this.autoSubmit=false;

                   var filename =this.filename();

                    var regex=/^.*\.(xls|xlsx)$/;
                    if(regex.test(filename)){
                        this.submit();
                    }else{
                        $.messager.alert('警告','文件类型不符合','warning');
                    }
                },
                onComplete :function(response){
                    if(response=='0'){
                        alert('导入成功');
                        $("#grid").datagrid("reload");
                    }else{
                        alert('导入失败');
                    }
                }




        });
        });
        var columns =[[{
            field : 'id',
            checkbox : true
        },{
            field : 'province',
            title : '省',
            width : 80,
            align : 'center'
        },{
            field : 'city',
            title : '市',
            width : 80,
            align : 'center'
        },{
            field : 'district',
            title : '区',
            width : 80,
            align : 'center'
        },{
            field : 'postcode',
            title : '邮编',
            width : 80,
            align : 'center'
        },{
            field : 'citycode',
            title : '城市编码',
            width : 80,
            align : 'center'
        },{
            field : 'shortcode',
            title : '简码',
            width : 80,
            align : 'center'
        }]];
        var toolbar =[{
            id : 'button-add',
            text : '增加',
            iconCls : 'icon-add',
            handler : doAdd
        },{
            id : 'button-edit',
            text : '修改',
            iconCls : 'icon-add',
            handler : doEdit
        },{
            id : 'button-import',
            text : '导入',
            iconCls : 'icon-redo'

        },{
            id : 'button-search',
            text : '查询',
            iconCls : 'icon-add',
            handler : doSearch
        }];
        function doAdd() {
            $("#city-picker").citypicker();
            $("#addWindow").window('open');

        }
        function doEdit() {
            var rows = $("#grid").datagrid("getSelections");
            if(rows.length!=1){
                $.messager.alert('警告','只能选择一条数据修改','warning');
            }
            var row = rows[0];
            // 赋值前，必须先执行 reset、destroy
            $('#city-picker').citypicker('reset');
            $('#city-picker').citypicker('destroy');

            $('#city-picker').citypicker({
                province: row.province,
                city: row.city,
                district: row.district
            });
            $("#areaForm").form('load',row);
            $("#addWindow").window('open');

        }

        function doSearch() {
            $("#searchWindow").window('open');
        }
        // 将form请求数据转换为json对象
        $.fn.serializeJson = function () {
            var serializeObj = {};
            var array = this.serializeArray();
            var str = this.serialize();
            $(array).each(function () {
                if (serializeObj[this.name]) {
                    if ($.isArray(serializeObj[this.name])) {
                        serializeObj[this.name].push(this.value);
                    } else {
                        serializeObj[this.name] = [serializeObj[this.name], this.value];
                    }
                } else {
                    serializeObj[this.name] = this.value;
                }
            });
            return serializeObj;
        };


       

    </script>
</head>

<body class="easyui-layout" style="visibility:hidden;">
<div region="center" border="false">
    <table id="grid"></table>
</div>
<div class="easyui-window" title="区域添加修改" id="addWindow" collapsible="false" minimizable="false" maximizable="false"
     closed="true" style="top:10px;left:200px">
    <div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
        <div class="datagrid-toolbar">
            <a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
        </div>
    </div>

    <div region="center" style="overflow:auto;padding:5px;" border="false">
        <form id="areaForm" action="../../area_save.action" method="post" style="height: 300px"
              >
            <table class="table-edit" width="80%" align="center">
                <tr>
                    <td>省市区</td>
                    <td style="position: relative;">
                            <input name="areaInfo" id="city-picker"  type="text">
                        <input type="hidden" name="id" />
                            <input id="reset" type="button" value="重置"/>
                    
                    </td>
                </tr>
                <tr>
                    <td>邮编</td>
                    <td>
                        <input type="text" name="postcode" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<!-- 查询区域-->
<div class="easyui-window" title="查询区域窗口" closed="true" id="searchWindow" collapsible="false" minimizable="false"
     maximizable="false" style="width: 400px; top:40px;left:200px">
    <div style="overflow:auto;padding:5px;" border="false">
        <form id="searchForm">
            <table class="table-edit" width="80%" align="center">
                <tr>
                    <td>省份</td>
                    <td>
                        <input type="text" name="province"/>
                    </td>
                </tr>
                <tr>
                    <td>城市</td>
                    <td>
                        <input type="text" name="city"/>
                    </td>
                </tr>
                <tr>
                    <td>区（县）</td>
                    <td>
                        <input type="text" name="district"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><a id="searchBtn" href="#" class="easyui-linkbutton"
                                       data-options="iconCls:'icon-search'">查询</a></td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>

</html>